<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios拦截器</title>
    <script crossorigin="anonymous" src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</head>

<body>
    <script>
        // 拦截：请求拦截器和响应拦截器
        // 请求拦截器： 发送真正的请求之前 设的关卡.先添加的后执行，后天的先执行
        // 响应拦截器：收到请求之后，响应结果之前设的关卡，先添加的先执行


        // 设置请求拦截器：
        // 作用：可以优先处理发送一些服务器需要的数据，比如：token ==》 在请求头中发送
        axios.interceptors.request.use(config => {
            console.log('请求拦截器 成功  1');
            config.headers.token = 'xxxxx';
            // 发请求前打开loading图
            return config;
        }, error => {
            console.log('请求拦截器 失败  1');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(config => {
            console.log('请求拦截器 成功  2');
            return config;
            // return Promise.reject('error');
        }, error => {
            console.log('请求拦截器 失败  2');
            return Promise.reject(error);
        })


        // 设置响应拦截器： axios回来的数据，真正的相应体数据 {data}
        axios.interceptors.response.use(response => {
            console.log('响应拦截器 成功  1');
            // 将axios返回的数据，直接取到响应体结果 response.data
            return response.data;
        }, error => {
            console.log('响应拦截器 失败  1');
            return Promise.reject(error);
        });

        axios.interceptors.response.use(response => {
            console.log('响应拦截器 成功  2');
            return response;
        }, error => {
            console.log('响应拦截器 失败  2');
            return Promise.reject(error);
        });

        axios.get('http://localhost:3000/computers').then(value=>{
            console.log('请求后数据', value);
        })

        
    // [成功2,失败2,成功1,失败1,request,undefined,响应成功1,响应失败1,响应成功2,失败2]
        
    </script>
</body>

</html>